<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M901.2736 145.8688c-156.7744-17.7152-274.688-60.16-350.5152-126.0544l-19.968-17.3056-21.504 15.36C390.4512 102.656 272.9472 145.664 160.0512 145.664h-33.536v469.2992c0 143.872 126.8736 274.3808 387.84 399.0016l13.7216 6.5536 13.9776-5.9904c258.1504-110.8992 389.0176-245.2992 389.0176-399.5136V149.248l-29.7984-3.3792z m-37.2736 469.0944c0 122.368-112.4864 233.984-334.5408 331.8784C306.5856 838.144 193.536 726.528 193.536 614.9632V211.6608c109.6704-7.1168 221.696-48.9472 333.6704-124.6208 80.384 61.2864 193.4336 102.144 336.7936 121.7536v406.1696z m0 0' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(51,51,51)'}' /%3E%3Cpath d='M369.3056 469.0432a33.4848 33.4848 0 0 0-47.3088-2.9184 33.4848 33.4848 0 0 0-2.9184 47.3088l127.5904 144.384c13.2096 14.8992 31.5904 22.5792 50.176 22.5792 20.1728 0 39.2704-9.0624 52.0704-24.6272l207.0016-254.2592c11.6736-14.336 9.5232-35.4816-4.8128-47.1552-14.336-11.6736-35.4816-9.5232-47.1552 4.8128l-207.0016 254.2592-127.6416-144.384z m0 0' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(51,51,51)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
